<template>
  <div class="stepOut" >
    <div  class="stepItem"  >
        <el-image class="stepItem_img" :src="stepInfo.subsetStatus>=1||stepInfo.subsetStatus>=2?'https://small.ygcha.com.cn/icon_shenqing _activate.png':'https://small.ygcha.com.cn/icon_shenqing _default.png'"  alt=""></el-image>
        <p :class="stepInfo.subsetStatus>=1||stepInfo.subsetStatus>=2?'blue':'gray'">售后申请</p>
        <p  class="time">{{stepInfo.afterApplyTime}}</p>
        <div :class="stepInfo.subsetStatus>=1||stepInfo.subsetStatus>=2?'stepItem_xian lineAction':'stepItem_xian'"></div>
    </div>
     <div class="stepItem shenheStatus"  >
        <el-image class="stepItem_img" :src="stepInfo.subsetStatus>=1||stepInfo.subsetStatus>=2?'https://small.ygcha.com.cn/icon_shenhe _activate.png':'https://small.ygcha.com.cn/icon_shenhe _default.png'"  alt=""></el-image>
        <p :class="stepInfo.subsetStatus>=1||stepInfo.subsetStatus>=2?'blue':'gray'">提交审核</p>
        <p  class="time">{{stepInfo.submitTime}}</p>
        <div :class="stepInfo.subsetStatus>=1||stepInfo.subsetStatus>=2?'stepItem_xian lineAction':'stepItem_xian'"></div>
        <div v-if="status.closeStatus=='1'" :class="status.closeStatus=='1'&&status.afterType==3?'closeTwo':'close'"></div>

    </div>
    <!--    -->
     <div class="stepItem wuliubtn" :style="status.afterType==3?'display:none':''" >
        <el-image class="stepItem_img" :src="(stepInfo.subsetStatus>=3||stepInfo.subsetStatus>=4)&&status.closeStatus!='1'?'https://small.ygcha.com.cn/icon_jihui _activate.png':'https://small.ygcha.com.cn/icon_jihui _default.png'"  alt=""></el-image>
        <p :class="(stepInfo.subsetStatus>=3||stepInfo.subsetStatus>=4)&&status.closeStatus!='1'?'blue':'gray'">买家寄回</p>
        <p  class="time">{{stepInfo.buyerReturnTime}}</p>
        <div :class="(stepInfo.subsetStatus>=3||stepInfo.subsetStatus>=4)&&status.closeStatus!='1'?'stepItem_xian lineAction':'stepItem_xian'"></div>
        <div class="btn" ><el-button size="mini" v-if="(stepInfo.subsetStatus>=3||stepInfo.subsetStatus>=4)&&status.closeStatus!='1'" @click="stepBtn(3)" type="primary" plain>查看物流</el-button></div>
    </div>
    <!--  -->
     <div class="stepItem wuliubtn" :style="status.afterType==3||status.afterType==1?'display:none':''">
        <el-image class="stepItem_img" :src="stepInfo.subsetStatus>=5&&status.closeStatus!='1'?'https://small.ygcha.com.cn/icon_fahuo _activate (1).png':'https://small.ygcha.com.cn/icon_fahuo _default (1).png'"  alt=""></el-image>
        <p :class="stepInfo.subsetStatus>=5&&status.closeStatus!='1'?'blue':'gray'">商家寄出</p>
        <p  class="time">{{stepInfo.merchantDeliveryTime}}</p>
        <div :class="stepInfo.subsetStatus>=5&&status.closeStatus!='1'?'stepItem_xian lineAction':'stepItem_xian'"></div>
        <div class="btn" ><el-button size="mini" v-if="stepInfo.subsetStatus>=5&&status.closeStatus!='1'" @click="stepBtn(5)" type="primary" plain>查看物流</el-button></div>
    </div>
     <div class="stepItem"  >
        <el-image class="stepItem_img" :src="(stepInfo.subsetStatus>=6||stepInfo.subsetStatus>=7||stepInfo.subsetStatus>=8)&&status.closeStatus!='1'?'http://small.jianchiyaoye.com/icon_wancheng_activate.png':'http://small.jianchiyaoye.com/icon_wancheng_default.png'"  alt=""></el-image>
        <p :class="(stepInfo.subsetStatus>=6||stepInfo.subsetStatus>=7||stepInfo.subsetStatus>=8)&&status.closeStatus!='1'?'blue':'gray'">售后完成</p>
        <p  class="time">{{stepInfo.finishedTime}}</p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'steps',
  props: {
    // 传递步骤参数
    stepInfo: {
      type: Object,
      default: function () {
        return {
          list: []
        }
      }
    },
    status: {
      type: Object,
      default: function () {
        return {
          list: []
        }
      }

    }
  },
  methods: {
    stepBtn (type) {
      this.$emit('stepStatus', type)
    }
  }

}
</script>

<style lang="scss" scoped>
.stepOut {
  display: flex;
  justify-content: center;

  .show{
    display: block ;
  }
  .hide{
    display:none;
  }
  .stepItem{
    width: 30%;
    height: 140px;
    text-align: center;
    position: relative;
    padding-top: 15px;
    box-sizing: border-box;
     .stepItem_img{
      width: 56px;
      height: 56px;
    }
    .stepItem_xian{
      position: absolute;
      left: 74%;
      top: 54px;
      width: 50%;
      height: 0px;
      border: 1px dashed #CCCCCC;
    }
    .lineAction {
        border: 1px dashed #4C81EB
    }

    .blue{
      font-size: 14px;
      font-weight: bold;
      color: #333333;
    }
    .gray{
      font-size: 14px;
      font-weight: 400;
      color: #CCCCCC;
    }
    .time{
      font-size: 14px;
      font-weight: 400;
      color: #999999;
    }
  }
  .wuliubtn{
    position: relative;
    .btn {
      position: absolute;
      left: 87%;
      top: 65px;
      z-index:9999;
    }
  }
  .shenheStatus{
    position: relative;
    .close {
      position: absolute;
      left: 74%;
      top: 54px;
      width: 50%;
      height: 0px;
      border: 1px dashed red;
       &:before {
            width: 8px;
            height: 8px;
            background: red;
            border-radius: 50%;
            content: '';
            color: red;
            position:absolute;
             border: 3px solid #f5d3d9;
            left:46%;
            top:-7px;
            }
              &:after {
                width: 100px;
                content: '售后关闭/拒绝';
                color: red;
                position:absolute;
                left:17%;
                top:-39px;
                font-size: 14px;
                font-weight: bold;
            }
    }
    .closeTwo {
      position: absolute;
      left: 74%;
      top: 54px;
      width: 50%;
      height: 0px;
      border: 1px dashed red;
       &:before {
            width: 8px;
            height: 8px;
            background: red;
            border-radius: 50%;
            content: '';
            color: red;
            position:absolute;
             border: 3px solid #f5d3d9;
            left:46%;
            top:-7px;
            }
              &:after {
                width: 100px;
                content: '售后关闭/拒绝';
                color: red;
                position:absolute;
                left:16%;
                top:-39px;
                font-size: 14px;
                font-weight: bold;
            }
    }
  }
}
@media screen and (max-width:1280px){
   .stepItem_img{
      width: 48px !important;
      height: 48px !important;
    }
  .close {
      position: absolute;
      left: 74%;
      top: 54px;
      width: 50%;
      height: 0px;
      border: 1px dashed red;
       &:before {
            width: 8px;
            height: 8px;
            background: red;
            border-radius: 50%;
            content: '';
            color: red;
            position:absolute;
             border: 3px solid #f5d3d9;
            left:46%;
            top:-7px;
            }
              &:after {
                width: 100px;
                content: '售后关闭/拒绝';
                color: red;
                position:absolute;
                left:-3% !important;
                top:-39px;
                font-size: 14px;
                font-weight: bold;
            }
    }
     .closeTwo {
      position: absolute;
      left: 74%;
      top: 54px;
      width: 50%;
      height: 0px;
      border: 1px dashed red;
       &:before {
            width: 8px;
            height: 8px;
            background: red;
            border-radius: 50%;
            content: '';
            color: red;
            position:absolute;
             border: 3px solid #f5d3d9;
            left:46%;
            top:-7px;
            }
              &:after {
                width: 100px;
                content: '售后关闭/拒绝';
                color: red;
                position:absolute;
                left:-3% !important;
                top:-39px;
                font-size: 14px;
                font-weight: bold;
            }
    }
    .wuliubtn{
    position: relative;
    .btn {
      position: absolute;
      left: 73% !important;
      top: 65px;
      z-index:9999;
    }
  }
}
</style>
